<template>
  <div>
    <div class="home_box">
      <!-- 视频教学首页展示 -->
      <div class="homeList_view">
        <div class="homeList_title">视频教学展示</div>
        <div class="home_list_five">
          <!-- 循环展示视频教学内容 -->
          <div v-for="(item,index) in shipinjiaoxueHomeList" :class="'home_list_five_item' + (Number(index) + 1)">
            <div class="img_box">
              <!-- 判断封面图片是否为外部链接 -->
              <img class="home_img" v-if="isHttp(item.fengmian)" :src="item.fengmian.split(',')[0]" alt="">
              <img class="home_img" v-else :src="item.fengmian?$config.url + item.fengmian.split(',')[0]:''" alt="">
            </div>
            <div class="homeList_content">
              <!-- 显示课程名称 -->
              <div class="homeList_title1">
                {{item.kechengmingcheng}}
              </div>
              <!-- 显示发布时间 -->
              <div class="homeList_title2">
                发布时间：{{item.fabushijian}}
              </div>
              <!-- 显示教师姓名 -->
              <div class="homeList_title3">
                教师姓名：{{item.jiaoshixingming}}
              </div>
            </div>
          </div>
        </div>
        <!-- 查看更多按钮 -->
        <div class="homeList_more_view" @click="moreClick('shipinjiaoxue')">
          <span class="homeList_more_text">查看更多</span>
          <el-icon><DArrowRight /></el-icon>
        </div>
      </div>
      <!-- 公告信息 -->
      <div class="newsList_view">
        <div class="newsList_title">公告信息</div>
        <div class="news_list_two">
          <!-- 公告信息轮播组件 -->
          <mySwiper :data="newsList" :type="3"
                    :loop="false"
                    :navigation="true"
                    :pagination="false"
                    :paginationType="1"
                    :scrollbar="false"
                    :slidesPerView="5"
                    :spaceBetween="20"
                    :autoHeight="false"
                    :centeredSlides="false"
                    :freeMode="false"
                    :effectType="0"
                    :direction="horizontal"
                    :autoplay="true"
                    :slidesPerColumn="1">
            <template #default="scope">
              <!-- 公告信息项 -->
              <div class="news_item animation_box" @click="newsDetailClick(scope.row.id)">
                <div class='news_img_box'>
                  <!-- 判断图片是否为外部链接 -->
                  <img class="news_img" v-if="isHttp(scope.row.picture)" :src="scope.row.picture.split(',')[0]" alt="">
                  <img class="news_img" v-else :src="scope.row.picture?$config.url + scope.row.picture.split(',')[0]:''" alt="">
                </div>
                <div class="news_content">
                  <!-- 公告标题 -->
                  <div class="news_title">{{scope.row.title}}</div>
                  <!-- 公告简介 -->
                  <div class="news_text">{{scope.row.introduction}}</div>
                  <!-- 公告时间 -->
                  <div class="news_time">{{scope.row.addtime.split(' ')[0]}}</div>
                </div>
              </div>
            </template>
          </mySwiper>
        </div>
        <!-- 查看更多按钮 -->
        <div class="news_more_view" @click="moreClick('news')">
          <span class="news_more_text">查看更多</span>
          <el-icon><DArrowRight /></el-icon>
        </div>
      </div>
    </div>
    <!-- 公告信息弹窗 -->
    <formModel ref="newsFormModelRef"></formModel>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';

// 获取全局上下文
const context = getCurrentInstance()?.appContext.config.globalProperties;
const router = useRouter();

// 视频教学首页展示数据
const shipinjiaoxueHomeList = ref([]);
const getshipinjiaoxueHomeList = () => {
  // 请求视频教学数据
  context?.$http({
    url: 'shipinjiaoxue/list',
    method: 'get',
    params: {
      page: 1,
      limit: 4
    }
  }).then(res => {
    shipinjiaoxueHomeList.value = res.data.data.list;
  });
};

// 公告信息弹窗组件
import formModel from './news/formModel';
const newsFormModelRef = ref(null);

// 公告信息数据
const newsList = ref([]);
const getNewsList = () => {
  // 请求公告信息数据
  context?.$http({
    url: 'news/list',
    method: 'get',
    params: {
      page: 1,
      limit: 12
    }
  }).then(res => {
    newsList.value = res.data.data.list;
  });
};

// 公告详情点击事件
const newsDetailClick = (id = null) => {
  if (id) {
    newsFormModelRef.value.init(id);
  }
};

// 判断图片链接是否带有 http
const isHttp = (str) => {
  return str && str.substr(0, 4) === 'http';
};

// 跳转详情页
const detailClick = (table, id) => {
  router.push(`/index/${table}Detail?id=${id}`);
};

// 跳转更多列表页
const moreClick = (table) => {
  router.push(`/index/${table}List`);
};

// 初始化页面数据
const init = () => {
  getshipinjiaoxueHomeList(); // 获取视频教学数据
  getNewsList(); // 获取公告信息数据
};
init();
</script>

<style lang="scss">
/* 首页容器样式 */
.home_box {
  padding: 0;
  margin: 0 auto;
  background: #fff;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* 视频教学展示样式 */
.homeList_view {
  padding: 30px 10% 10px;
  margin: 60px 0 0;
  background: #73968310;
  width: 100%;
  position: relative;
  text-align: center;
  order: 2;

  .homeList_title {
    padding: 0px;
    margin: 0;
    color: #739683;
    background: none;
    font-weight: 500;
    width: 100%;
    font-size: 30px;
    border-color: #eee;
    border-width: 0px;
    border-style: solid;
    text-align: center;
  }

  /* 视频教学列表样式 */
  .home_list_five {
    margin: 30px 0 0;
    display: flex;
    width: 100%;
    align-items: flex-start;
    flex-wrap: wrap;

    .home_list_five_item1 {
      margin: 0 30px 20px 0;
      width: calc(25% - 30px);

      .img_box {
        width: 100%;
        height: 380px;

        .home_img {
          object-fit: cover;
          width: 100%;
          height: 100%;
        }
      }

      .homeList_content {
        padding: 5px 0 0;
        background: none;
        display: flex;
        flex-wrap: wrap;

        .homeList_title1 {
          width: 100%;
          text-align: left;
        }

        .homeList_title2 {
          width: 100%;
          text-align: left;
        }

        .homeList_title3 {
          width: 100%;
          text-align: left;
        }
      }
    }
  }

  /* 查看更多按钮样式 */
  .homeList_more_view {
    cursor: pointer;
    padding: 0;
    margin: 0 auto;
    top: 80px;
    background: none;
    display: inline-block;
    width: auto;
    position: absolute;
    right: 10%;
    text-align: center;

    .homeList_more_text {
      padding: 0px;
      color: #fff;
      display: inline-block;
      font-size: 16px;
    }

    .el-icon {
      color: #fff;
      display: inline-block;
    }
  }
}

/* 公告信息样式 */
.newsList_view {
  padding: 40px 10% 60px;
  margin: 0 auto;
  background: #fff;
  display: block;
  width: 100%;
  position: relative;
  order: 3;
  height: auto;

  .newsList_title {
    padding: 0 0 8px;
    margin: 0 auto 20px;
    color: #667C5E;
    background: none;
    font-weight: 500;
    width: auto;
    font-size: 30px;
    border-color: #999;
    border-width: 0 0 0px;
    border-style: dashed;
    text-align: left;
  }

  /* 公告列表样式 */
  .news_list_two {
    display: flex;
    width: 100%;
    flex-wrap: wrap;

    .news_item {
      margin: 0 10px;
      background: #fff;
      width: 100%;

      .news_img_box {
        width: 100%;
        height: 300px;

        .news_img {
          object-fit: cover;
          width: 100%;
          height: 100%;
        }
      }

      .news_content {
        padding: 10px;
        background: #B5D0AC30;

        .news_title {
          overflow: hidden;
          color: #000;
          white-space: nowrap;
          font-weight: 600;
          width: 100%;
          font-size: 14px;
          line-height: 40px;
          text-overflow: ellipsis;
          text-align: left;
        }

        .news_text {
          font-size: 14px;
          line-height: 1.5;
        }

        .news_time {
          color: #666;
          width: 100%;
          text-align: right;
        }
      }
    }
  }

  /* 查看更多按钮样式 */
  .news_more_view {
    cursor: pointer;
    border: 0px solid #ddd;
    border-radius: 0px;
    padding: 0px 0;
    margin: 20px auto;
    top: 26px;
    background: none;
    width: auto;
    line-height: 34px;
    position: absolute;
    right: 10%;
    text-align: center;

    .news_more_text {
      color: #667C5E;
      display: inline-block;
      font-size: 16px;
    }

    .el-icon {
      color: #667C5E;
      display: inline-block;
    }
  }
}
</style>